<template>
  <div class="a">
    <div class="yjlb">
      <p>预警列表</p>
      <span>刷新</span>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="预警编号"> </el-table-column>
        <el-table-column prop="name" label="预警时间"> </el-table-column>
        <el-table-column prop="address" label="审核状态"> </el-table-column>
        <el-table-column prop="address" label="审核结果"> </el-table-column>
        <el-table-column prop="address" label="制作人"> </el-table-column>
        <el-table-column prop="address" label="审核人"> </el-table-column>
        <el-table-column prop="address" label="黄色位置"> </el-table-column>
        <el-table-column prop="address" label="橙色位置"> </el-table-column>
        <el-table-column prop="address" label="红色位置"> </el-table-column>
      </el-table>
    </div>
    <div class="yjfb">
      <p>预警发布</p>
      <el-button type="small">预警发布</el-button>
    </div>
    <div class="sccp">
      <p>待生成产品</p>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="预警编号"> </el-table-column>
        <el-table-column prop="name" label="时间"> </el-table-column>
        <el-table-column prop="address" label="黄色"> </el-table-column>
        <el-table-column prop="address" label="橙色"> </el-table-column>
        <el-table-column prop="address" label="红色"> </el-table-column>
        <el-table-column prop="address" label="制作人"> </el-table-column>
        <el-table-column prop="address" label="发布人"> </el-table-column>
      </el-table>
    </div>
    <div class="tabs">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="实况" name="first">
          <div class="sk">
            <div>
              <span>时间区间</span>
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
            <div>
              <span>分析等级</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="checkbox">
              <el-checkbox-group
                v-model="checkedCities"
                @change="handleCheckedCitiesChange"
              >
                <el-checkbox v-for="city in cities" :label="city" :key="city">{{
                  city
                }}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="btn">
              <el-button type="small">实况分析</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="预报" name="second">
          <div class="yb">
            <div>
              <span>时间</span>
              <el-date-picker
                v-model="value1"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </div>
            <div>
              <span>时次</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <span>时效</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <span>分析等级</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="btn">
              <el-button type="small">分析</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="地理分析" name="third">
          <div class="dlfx">
            <div>
              <span>分析等级</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <span>分析内容</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="btn">
              <el-button type="small">分析</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="cpzz">
      <p>产品制作</p>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="btn">
        <el-button type="small">模板编辑</el-button>
        <el-button type="small">文档生成</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      cities: [
        "降水",
        "空气温度",
        "最高气温",
        "最低气温",
        "10分钟风向",
        "最大风向",
        "最大风速",
        "阵风风向",
        "本站气压",
      ],
      checkedCities: [],
    };
  },
};
</script>
<style scoped lang="less">
.a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  justify-content: center;
  .yjlb {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      margin-right: 0;
      color: red;
      border-bottom: 1px solid red;
    }
    p {
      margin: 10px;
    }
  }
  .yjfb {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      margin-right: 0;
      color: red;
      border-bottom: 1px solid red;
    }
    p {
      margin: 10px;
    }
  }
  .sccp {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    p {
      margin: 10px;
    }
  }
  .tabs {
    width: 100%;
    font-size: 10px;
    .sk {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .el-date-editor,
      .el-select {
        width: 200px;
      }
      div {
        margin: 5px auto;
      }
      .checkbox {
        width: 100%;
        .el-checkbox-group {
          padding-left: 30px;
        }
      }
      .btn {
        .el-button {
          margin: 0 auto;
        }
      }
      span {
        margin-right: 10px;
      }
    }
    .yb,
    .dlfx {
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        width: 50px;
      }
      div {
        margin: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  .cpzz {
    display: flex;
    width: 90%;
    flex-direction: column;
    align-items: center;
    p {
      margin: 10px;
    }
    .el-select {
      margin: 10px;
    }
  }
}
</style>
